<template>
    <div class="shenqing">
        <p class="msg">项目信息</p>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="活动名称" prop="types">
                <el-radio-group v-model="types">
                    <el-radio :label="1">农业</el-radio>
                    <el-radio :label="2">设计</el-radio>
                </el-radio-group>
           </el-form-item>
           <el-form-item label="项目名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="项目名称不超过15个字(不包括句号),不能使用英文字符,主要用途 PC项目标题展示"></el-input>
           </el-form-item>
            <el-form-item label="一句话简介" prop="intro">
                <el-input v-model="ruleForm.intro" placeholder="简单介绍下你的项目，不超过40个字,不能使用英文字符,主要用途 PC和移动端项目文字介绍"></el-input>
           </el-form-item>
            <!-- <el-form-item label="项目卖点" prop="special">
                <el-input v-model="ruleForm.special" placeholder="请输入突出创意卖点的标语用于 项目卖点、标签、特色展示，不超过8个中英文数字"></el-input>
           </el-form-item> -->
           <el-form-item label="众筹最低总额" prop="mintotal">
               <el-input v-model="ruleForm.mintotal" class="num"></el-input>元
             </el-form-item>
             <el-form-item label="物品单价" prop="price">
               <el-input v-model="ruleForm.price" class="num"></el-input>元
             </el-form-item>
             <el-form-item label="最高数量" prop="number">
               <el-input v-model="ruleForm.number" class="num"></el-input>
             </el-form-item>
              <el-form-item label="开始日期">
               <el-date-picker
       v-model="ruleForm.startday"
       type="date"
       placeholder="选择日期"
       :picker-options="pickerOptions0">
</el-date-picker>
             </el-form-item>
             <el-form-item label="筹资天数" prop="day">
               <el-input v-model="ruleForm.day" placeholder="推荐30天" class="num"></el-input>天
             </el-form-item>
              <el-form-item label="宣传图片" prop="PackingImage">
                        <el-upload
                            class="upload-demo"
                            action="http://127.0.0.1:8081/client/uploadImage"
                            :on-success="uploadSuccess"
                          
                            list-type="picture"><!-- on-success是api里的上传成功的钩子；file-list是显示图片 -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                              <!-- :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList2" -->
                            <span class="zushi">第一张图片将用于封面图片</span>
                </el-form-item>
             <el-form-item label="承诺发货时间" prop="time">
               <el-input v-model="ruleForm.time" class="num"></el-input>天内
             </el-form-item>
             <el-form-item label="回报说明" prop="shuoming">
               <el-input v-model="ruleForm.shuoming" type="textarea"></el-input>
             </el-form-item>
              <el-form-item label="公司名称" prop="company">
               <el-input v-model="ruleForm.company"></el-input>
             </el-form-item>
        </el-form>
         <div slot="footer" class="buttons">
                <el-button type="primary" class="button_inner" @click="saveEdit">确 定</el-button>
            </div>
            <!-- <img src="http://127.0.0.1:8081/public/upload/tuto.png"/>{{filess}}
             -->
           <!-- <img :src="'http://127.0.0.1:8081/upload/'+filess+'.png'"/>{{filess}} -->
    </div>
</template>

<script>
export default {
data () {
     var validateName = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入名称'));
        } 
         else {
          // let reg1 = /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[a-z]|[A-Z])+$/;
          // console.log(reg1.test(value));
          // if (reg1.test(value)) {
            //   this.ustatus=true;
            if(this.ruleForm.name.length<3||this.ruleForm.name.length>15)
             {
               callback(new Error('请输入3-15个字'));  
             }
             else{
                             callback();
             }
          // } else {
            //   this.ustatus=false;
            // return callback(new Error('请输入中文'));
          // }
        }
      };
      var validateIntro = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入简介'));
        } 
         else {
          //  let reg1 = /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[a-z]|[A-Z])+$/;
          // console.log(reg1.test(value));
          // if (reg1.test(value)) {
            //   this.ustatus=true;
            if(this.ruleForm.intro.length<10||this.ruleForm.intro.length>42)
             {
               callback(new Error('请输入10-42个字'));  
             }
             else{
                             callback();
             }
          // } else {
            //   this.ustatus=false;
            // return callback(new Error('请输入中文'));
          }
        };
       var validateSpecial = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入卖点'));
        } 
         else {
          const reg1 = /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[a-z]|[A-Z]|[0-9])+$/;
          console.log(reg1.test(value));
          if (reg1.test(value)) {
            //   this.ustatus=true;
            if(this.ruleForm.special.length<3||this.ruleForm.special.length>8)
             {
               callback(new Error('请输入3-8个字符'));  
             }
             else{
                             callback();
             }
          } else {
            //   this.ustatus=false;
            return callback(new Error('请输入中英文或数字'));
          }
        }
      };
       var validateShuoming= (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入回报说明'));
        } 
         else {
          const reg1 =  /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0]|[a-z]|[A-Z]|[0-9])+$/;
          console.log(reg1.test(value));
          if (reg1.test(value)) {
            //   this.ustatus=true;
            if(this.ruleForm.intro.length<10||this.ruleForm.intro.length>100)
             {
               callback(new Error('请输入10-100个字'));  
             }
             else{
                             callback();
             }
          } else {
            //   this.ustatus=false;
            return callback(new Error('请输入正确字符'));
          }
        }
      };
      var validatemin = (rule, value, callback) => {
        if (value === '') {
            // this.ustatus=false;
          callback(new Error('请输入值'));
        } 
         else {
          const reg1 = /^[0-9]+$/;
          console.log(reg1.test(value));
          if (reg1.test(value)) {
            //   this.ustatus=true;
            return callback();
          } else {
            //   this.ustatus=false;
            return callback(new Error('请输入数字'));
          }
        }
      };
    
    return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
        },  
         types:1,
         dialogImageUrl: '',
        dialogVisible: false,
        uploadImageUrl:"",//存储上传图片返回的路径
                uploadImageName:"",//上传图片的名字
                fileList2: [],
                fileList:"",
                datas:"",
                times:"",
        ruleForm:{
           name:"",
           intro:"",
           special:"",
           mintotal:"",
           price:"",
           number:"",
           day:"",
           time:"",
           shuoming:"",
           company:"",
           PackingImage:"",
           startday:'',
        },
        rules:{
            types:{ required: true,trigger: 'blur' },
            name:{ required: true,validator:validateName,trigger: 'blur' },
            intro:{required:true,validator:validateIntro,trigger:'blur'},
            special:{required:true,validator:validateSpecial,trigger:'blur'},
            mintotal:{required:true,trigger:"blur",validator:validatemin},
            price:{required:true,trigger:"blur",validator:validatemin},
            number:{required:true,trigger:"blur",validator:validatemin},
            day:{required:true,trigger:"blur",validator:validatemin},
            time:{required:true,trigger:"blur",validator:validatemin},
            shuoming:{required:true,trigger:"blur",validator:validateShuoming},
            company:{required:true,trigger:"blur",validator:validateName},
            startday:{required:true,trigger:"blur"}
            

}
    }
},
methods: {
    //上传图片
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
//上传成功后获取到图片路径,并且把原本的图片名称传到后台去，需要拼接一下
            uploadSuccess(res){
              // console.log(fileList)
              //  var name=file.name;
               console.log(res);
               this.filess="http://127.0.0.1:8081/upload/"+res.data+".png";
               this.fileList2.push(this.filess)
              //  var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png         																				this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字，真实传到后台的路径 res.data.split("/")[1]为images， res.data.split("/")[2]为packImage
            },
            dates(day,num)
            {
              let currentDate=(new Date(day)).getTime();
              let lw=currentDate+1000*60*60*24*num;
              let dates=new Date(lw);
              console.log("current",currentDate);
              let nextY = dates.getFullYear();
              let nextM = dates.getMonth()+1;
              let nextD = dates.getDate();
              let enddate=nextY+"-"+nextM+"-"+(nextD<10 ? "0"+ nextD : nextD);
              return enddate;
            },
            saveEdit()
            {
              // console.log("startday",this.ruleForm.startday);
              // console.log(new Date(this.ruleForm.startday).getTime())
            //   let currentDate=(new Date()).getTime();
            //   let lw=currentDate+1000*60*60*24*30;
            //   let dates=new Date(lw);
            //   console.log("current",currentDate);
            // let nextY = dates.getFullYear();
            // let nextM = dates.getMonth()+1;
            // let nextD = dates.getDate();
            // let enddate=nextY+"-"+nextM+"-"+(nextD<10 ? "0"+ nextD : nextD);
            //   console.log("current",lw);
            //   console.log("nowy",lastY);
            //   console.log("nowm",lastM);
            //   console.log("nowd",lastD);
            //   console.log("enddate",enddate);
              // console.log("types",this.types);
              // console.log("name",this.ruleForm.name);
              // console.log("lsit",this.fileList2);
              // let img=this.fileList2.slice(0,1);
              // this.fileList=JSON.stringify(this.fileList2);
              // this.fileList=this.fileList.substr(1,this.fileList.length-2);
              // console.log(this.fileList);
              // let day=this.ruleForm.day;
              // this.ruleForm.day=this.$options.methods.dates(this.ruleForm.day);
              // this.times=this.$options.methods.dates(parseInt(day)+parseInt(this.ruleForm.time));
              console.log(this.ruleForm.day);
              console.log(this.times);
               console.log("intro",this.ruleForm.intro);
                console.log("special",this.ruleForm.special);
                 console.log("mintotal",this.ruleForm.mintotal);
                  console.log("price",this.ruleForm.price);
                   console.log("number",this.ruleForm.number);
                    console.log("day",this.ruleForm.day);
                     console.log("time",this.ruleForm.time);
                      console.log("shuoming",this.ruleForm.shuoming);
                       console.log("company",this.ruleForm.company);
              if(this.types&&this.ruleForm.name&&this.ruleForm.intro&&this.ruleForm.mintotal&&this.ruleForm.price&&this.ruleForm.number&&this.ruleForm.day&&this.ruleForm.time&&this.ruleForm.shuoming&&this.ruleForm.company&&this.ruleForm.startday)
              {
                if(parseInt(this.ruleForm.mintotal)>(parseInt(this.ruleForm.number*this.ruleForm.price)))
              {
                 this.$message({
                message: '众筹最低金额不能大于众筹最高限度金额',
                type: 'warning'
                });
              }
              else{
                 let img=this.fileList2.slice(0,1);
              this.fileList=JSON.stringify(this.fileList2);
              this.fileList=this.fileList.substr(1,this.fileList.length-2);
              this.fileList=this.fileList.replace(/\"/g, "");
              console.log(this.fileList);
              img=JSON.stringify(img);
              img=img.substr(2,img.length-4);
              console.log(img)
               let day=this.ruleForm.day;
              this.ruleForm.day=this.$options.methods.dates(this.ruleForm.startday,this.ruleForm.day);
              this.times=this.$options.methods.dates(this.ruleForm.startday,parseInt(day)+parseInt(this.ruleForm.time));

               this.$axios.post("http://127.0.0.1:8081/client/addcrowd",{
      c_name:this.ruleForm.name,
      cs_img:img,
      c_detailes:this.ruleForm.intro,
      c_targetmoney:this.ruleForm.mintotal,
      c_day:this.ruleForm.day,
      max_yield:this.ruleForm.number,
      c_price:this.ruleForm.price,
      c_goodsday:this.ruleForm.time,
      c_content:this.ruleForm.shuoming,
      c_company:this.ruleForm.company,
      c_imgs:this.fileList,
      c_fhtime:this.times,
      c_classify:this.types,
      cu_id:sessionStorage.getItem("userid"),
      startday:new Date(this.ruleForm.startday).getTime()
    }).then(res=>{
              console.log(res.data);
              if(res.data.status==1)
              {
                 this.$message({
                message: res.data.msg,
                type: 'success'
                });
              this.$router.push({
                path:"/mycrowd",
                query:{"userid":sessionStorage.getItem("userid")}
              })
              }
              else{
                this.$message({
                message: res.data.msg,
                type: 'warning'
                });
              }
              })}
              }
              else{
                 this.$message({
                message: '请填完所有信息',
                type: 'warning'
                });
              }
            }
}
}
</script>

<style>
.shenqing{
    margin: 0 auto;
    width: 1080px;
}
.msg{
    margin: 30px 0 0;
    padding-bottom:10px; 
    color: #7a7d80;
    font-size: 18px;
    border-bottom: 1px solid #eee;
}
.el-input,.el-textarea{
  margin-left: 10px;
  margin-right: 10px;
  width: 600px;
}
.el-form-item__label{
  width: 150px !important;
}
.buttons{
  text-align: center;
}
.num{
  width: 100px !important;
}
.button_inner{
  /* display: block; */
  width: 200px;
  line-height: 40px;
  letter-spacing: 20px;
  font-size: 22px;
}
.el-message .el-message--warning{
  z-index: 999999 !important;
}
.zushi{
  color: red;
  font-size: 12px;
}
</style>
